/**
 * Created by zheng on 2018/12/16.
 */
import GGEditor, {
	Flow, ItemPanel, Item, NodeMenu, Command,
	ContextMenu, EdgeMenu, GroupMenu, CanvasMenu
} from 'gg-editor'
import React from 'react'
import debounce from '../../utils/customDebounce'

class GgEditorDemo extends React.Component {


	func = debounce((test) => {
		console.log(test);
	}, 3000)


	state = {
		data: {
			nodes: [{
				type: 'node',
				size: '70*70',
				shape: 'flow-circle',
				color: '#FA8C16',
				label: '起止节点',
				x: 55,
				y: 55,
				id: 'ea1184e8',
				index: 0,
			}, {
				type: 'node',
				size: '70*70',
				shape: 'flow-circle',
				color: '#FA8C16',
				label: '结束节点',
				x: 55,
				y: 255,
				id: '481fbb1a',
				index: 2,
			}],
			edges: [{
				source: 'ea1184e8',
				sourceAnchor: 2,
				target: '481fbb1a',
				targetAnchor: 0,
				id: '7989ac70',
				index: 1,
			}],
		}
	}

	onFlowChange = () => {
		this.func(3)
	}


	render() {
		return (
			<GGEditor style={{
				display: 'flex',
				height: '500px'
			}}
			>
				<ItemPanel style={
					{
						backgroundColor: '#000',
						height: '100%'
					}
				}>
					<Item
						type="node"
						size="72*72"
						shape="flow-circle"
						model={{
							color: '#FA8C16',
							label: 'Item 1',
						}}
						src="https://gw.alipayobjects.com/zos/rmsportal/ZnPxbVjKYADMYxkTQXRi.svg"
					/>
				</ItemPanel>
				<Flow
					ref="test"
					style={{width: 500, height: 500}} data={this.state.data}
					onAfterChange={this.onFlowChange}
				/>
				<ContextMenu>
					<NodeMenu>
						<Command name="copy">Copy</Command>
						<Command name="paste">Paste</Command>
						<Command name="delete">Delete</Command>
					</NodeMenu>
					<EdgeMenu />
					<GroupMenu />
					<CanvasMenu />
				</ContextMenu>
			</GGEditor>
		)
	}
}

export default GgEditorDemo